<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/vue-2.6.12.js"></script>
    <script type="text/javascript" src="../js/axios-0.21.0.js"></script>
</head>
<body>
<div id="wrap">
    <div class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a href="./main.html" class="navbar-brand">在线珠宝商城</a>

            </div>
            <span v-if="user !== null" class="navbar-text">欢迎您：<a href="">{{user.userName}}</a></span>
            <ul v-if="user === null" class="nav navbar-nav">
                <li><a href="../login.html" class="navbar-link"><span class="text-primary">登录</span></a></li>
                <li class="divider"></li>
                <li><a href="../register.html" class="navbar-link"><span class="text-primary">注册</span></a></li>
            </ul>
            <ul class="nav navbar-nav" v-if="user !== null">
                <li><a href="#" @click.prevent="logout" class="navbar-link"><span class="text-primary">退出登录</span></a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="cart/cart.html">
                        <svg height="15" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                             viewBox="0 0 489 489" style="enable-background:new 0 0 489 489;" xml:space="preserve">
                        </svg>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <form action="search-jewelry.html">
                    <div class="input-group navbar-btn">
                        <input type="text" name="productName" placeholder="搜索珠宝名" id="" class="form-control">
                        <div class="input-group-btn">
                            <button type="submit" class="btn btn-danger"><span
                                    class="glyphicon glyphicon-search"></span></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="navbar navbar-default">
            <div class="container-fluid">
                <ol class="breadcrumb navbar-left navbar-btn">
                    <span>你当前所在的位置：</span>
                    <li><a href="main.html">珠宝</a></li>
                    <li>搜索</li>
                    <li class="active">关键字</li>
                </ol>

                <ul class="pager navbar-right navbar-btn">
                    <li>第 <span>{{pageNum}}</span> 页</li>
                    <li><a href="" class="button" @click.prevent="pageListProducts(pageNum - 1)"
                           :disabled="pageNum == 1">上一页</a></li>
                    <li><a href="" class="button" @click.prevent="pageListProducts(pageNum + 1)"
                           :disabled="pageNum == pageInfo.totalPages">下一页</a></li>
                    <li>共 <span>{{pageInfo.totalPages}}</span> 页</li>
                </ul>

            </div>

        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <ul class="media-list" v-for="product in this.pageInfo.list">
                            <li class="media">
                                <div class="media-left media-middle">
                                    <a :href="'jewelry-detail.html?productId='+product.productId"><img
                                            class="media-object"
                                            :src="'http://localhost:8080/images/'+product.imageUrl"
                                            alt="图片"
                                            style="width:150px"></a>
                                </div>
                                <div class="media-body">
                                    <a href=""><h5 class="text-primary">{{product.productName}}</h5></a>
                                    <hr>
                                    <p class="small text-muted">作者：<span>{{product.weight}}</span></p>
                                    <p class="small text-muted">出版社：<span>{{product.purity}}</span>
                                        出版时间：<span>{{product.craftsmanship}}</span></p>
                                    <p>{{product.certification}}</p>
                                    <p>
                                        <del class="">￥{{product.price}}</del>
                                        <strong style="color:red">￥{{product.jprice}}</strong> 节省：<span
                                            class="text-success">￥{{product.price - product.jprice}}</span>
                                        <a href="" class="btn btn-danger" @click.prevent="putCart(product.productId)">加入购物车</a>
                                    </p>
                                </div>
                            </li>
                            <hr>

                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: "#wrap",
        data: {
            pageNum: 1,
            pageSize: 5,
            productName: "",
            pageInfo: {
                list: [],
                pages: [],
                totalRows: 100,
                totalPages: 10,
            },
            user: null

        },
        created() {
            this.isLogin();
            let bn = location.search;
            console.log(bn)
            this.pageListProducts(1)

        },
        methods: {
            logout(){
                axios.get('/user/logout').then(res => {
                    alert('退出成功');
                    location.href = '/front/main.html';
                })
            },
            isLogin() {
                axios.get('/user').then(res => {
                    this.user = res.data.data
                })
            },
            pageListProducts(page) {
                if (page === 0 || page > this.pageInfo.totalPages) {
                    alert("温馨提示：请注意在翻页的时候不要超出总页数范围")
                    return
                }
                this.pageNum = page;
                let queryParams = `${location.search}&pageNum=${page}&pageSize=${this.pageSize}`;
                let url = "/pro/page" + queryParams;
                console.log(url)
                axios.get(url)
                    .then(resp => {
                        let a = [];
                        for (let i = 1; i <= resp.data.totalPages; i++) {
                            a.push(i);//总页数
                        }

                        this.pageInfo = resp.data;
                        this.pageInfo.pages = a;
                        console.log(this.pageInfo);
                    })
            },
            putCart(productId) {
                if (this.user === null) {
                    alert('请先登录！');
                    location.href = '../login.html';
                    return;
                }
                console.log(productId)
                axios.get("/cart/putCart?productId=" + productId)
                location.href = "/front/cart/cart.html"
            }
        }
    })
</script>
</body>
</html>